<template>
    <a-drawer :title="title" :width="400" @close="handleCancel" :visible="visible" :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">


            <a-form-model-item label="计划标题" prop="title" ref="title">
                <a-input v-model="form.title" :placeholder="placeholder.title"/>
            </a-form-model-item>


            <a-form-model-item label="授权门禁" prop="clientMac" ref="clientMac">


                <a-select allowClear v-model="form.clientMac" :placeholder="placeholder.clientMac">
                    <a-select-option v-for=" (item,index) in ClientMacOPT"   :key="index" :value="item.value">
                        {{item.label}}
                    </a-select-option>

                </a-select>

            </a-form-model-item>


            <a-form-model-item label="开始日期" prop="beginDate" ref="beginDate">
                <a-date-picker @change="onChangeBeginDate" style="width:200px"
                               :placeholder="placeholder.beginDate"
                               v-model="form.beginDate"/>
            </a-form-model-item>

            <a-form-model-item label="结束日期" prop="endDate" ref="endDate"

            >
                <a-date-picker @change="onChangeEndDate" style="width:200px"
                               :placeholder="placeholder.endDate"
                               v-model="form.endDate"/>
            </a-form-model-item>

            <a-form-model-item label="开始时间" prop="beginTime" ref="beginTime"  class="mb20"
                               help="周期内每天开启门禁权限的时间"
            >
                <a-time-picker
                        :allowClear="true"
                        @change="changeBeginTime"
                        :value="ksTime"
                        format="HH:mm" style="width:200px">

                </a-time-picker>

            </a-form-model-item>

            <a-form-model-item label="截止时间" prop="endTime" ref="endTime"  class="mb20"
                               help="周期内每天收回门禁权限的时间">

                <a-time-picker
                        :allowClear="true"
                        @change="changeEndTime"
                        :value="jsTime"
                        format="HH:mm" style="width:200px">

                </a-time-picker>
            </a-form-model-item>



            <!-- 状态 -->
            <a-form-model-item label="启用状态"   prop="status" ref="status">

                <a-radio-group v-model="form.status" button-style="solid">
                    <a-radio-button v-for="(item,index) in PassWayTaskStatusOPT"
                                    :key="index"
                                    :value="item.value">{{item.label}}</a-radio-button>

                </a-radio-group>
            </a-form-model-item>

        </a-form-model>
        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </footer>
    </a-drawer>
</template>
<script>
    import {dictLoad} from '../../../util/internal.api';
    import {dictClientMac, authorizeAdd, authorizeUpdate} from '../public/http';
    import moment from 'moment';

    export default {
        props: ['editRecord'],
        data() {
            return {
                open: false,
                isUpdate: false, //是否是更新模式
                loading: false, //按钮Loading
                title: '新建授权计划',
                visible: true, //modal 显示状态
                labelCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 6
                    }
                },
                wrapperCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 16
                    }
                },

                placeholder: {
                    title: '请设置授权计划标题',
                    clientMac: "请选择授权门禁",
                    beginDate: '请选择计划开始日期',
                    endDate: '请选择计划截止日期',
                    beginTime: '请选择授权开始时间',
                    endTime: '请选择授权截止时间'


                },
            //    ksTime:null,
                form: {
                    title: "",
                    clientMac: undefined,
                    beginDate: null,
                    endDate: null,
                    beginTime: null,
                    endTime: null,
                    status:null,


                },
                rules: {
                    title: [
                        {
                            required: true,
                            message: '请设置授权计划标题 ',
                            trigger: 'blur'
                        },
                        {
                            max: 50,
                            message: '计划标题不能超过50个字符',
                            trigger: 'blur'
                        }
                    ],

                    clientMac: {
                        required: true,
                        message: '请选择授权门禁',
                        trigger: 'blur'
                    },

                    beginDate: {
                        required: true,
                        message: '请选择计划开始日期',

                    },

                    endDate: {
                        required: true,
                        message: '请选择计划截止日期',

                    },


                    beginTime: {
                        required: true,
                        message: '请选择授权开始时间',

                    },

                    endTime: {
                        required: true,
                        message: '请选择授权截止时间',

                    },

                    status:{
                        required: true,
                        message: '请设置授权计划的启用状态',
                    },

                },

                ClientMacOPT: [], //门禁终端的MAC地址字典
                PassWayTaskStatusOPT:[], //任务状态字典

            };
        },
        methods: {
            moment,
            //开始日期
            onChangeBeginDate(date) {


                if (date === null) {
                    this.form.beginDate = null
                } else {
                    this.form.beginDate = date.format("YYYY-MM-DD")
                }


            },
            //截止日期
            onChangeEndDate(date) {


                if (date === null) {
                    this.form.endDate = null
                } else {
                    this.form.endDate = date.format("YYYY-MM-DD")
                }


            },


            //开始时间选择
            changeBeginTime(time) {
                if (time === null) {
                    this.form.beginTime = null
                } else {
                    this.form.beginTime = time.format("HH:mm")
                }


            },
            //结束时间选择
            changeEndTime(time) {
                if (time === null) {
                    this.form.endTime = null
                } else {
                    this.form.endTime = time.format("HH:mm")
                }

            },


            //表单提交事件
            onSubmit() {



                this.$refs.ruleForm.validate(valid => {

                    //验证成功后进行数据提交
                    if (valid) {
                        this.loading = true;
                        let ksRq=this.form.beginDate;
                        let jsRq=this.form.endDate;
                        if(ksRq>jsRq){
                            this.form.beginDate=jsRq;
                            this.form.endDate=ksRq;
                        }

                        let ksTime=this.form.beginTime;
                        let jsTime=this.form.endTime;
                        //自动调整时间
                        if(ksTime>jsTime){
                            this.form.beginTime=jsTime;
                            this.form.endTime=ksTime;
                        }
                        //日期和时间自动调整

                        if (this.isUpdate) {
                            authorizeUpdate(this.form.id, this.form).then(res => this.xhrMsg(res));
                        } else {
                            authorizeAdd(this.form).then(res => this.xhrMsg(res));
                        }
                    }
                });
            },
            //新增和删除返回相同的消息构造
            xhrMsg(res) {
                if (res.code === 0) {
                    //成功提醒
                    this.$notification.success({
                        message: '操作成功',
                        description: res.message
                    });
                    this.visible = false;
                    this.$emit('closeFun', {
                        render: true
                    });
                } else {
                    //错误提醒
                    this.$notification.error({
                        message: '操作失败',
                        description: res.message
                    });
                }
                this.loading = false;
            },
            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeFun', {
                    render: false
                });
            },
            //表单初始化
            fromVal() {
                let obj = {...this.editRecord};

                if (obj.id) {
                  this.form = obj;
                    this.isUpdate = true;
                    this.title = '编辑场地';



                }

            },
            //数据初始化
            async init() {
                await dictLoad('PassWayTaskStatus').then(res => (this.PassWayTaskStatusOPT = res));
                await dictClientMac().then(res => (this.ClientMacOPT = res));
                this.fromVal();
            }
        },

        created() {
            this.init();
        },
        computed:{
            ksTime(){
                if(this.form.beginTime==null){
                    return null;
                }else{
                    return  moment(this.form.beginTime, 'HH:mm')
                }
            },
            jsTime(){
                if(this.form.endTime==null){
                    return null;
                }else{
                    return  moment(this.form.endTime, 'HH:mm')
                }
            }
        }


    };
</script>
<style scoped>

    .mb20{
        margin-bottom: 20px;
    }
</style>
